<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        /**
         * ele        元素
         * attr       运动的属性
         * target     属性要到的目标位置
         * duartion： 总时长
         * 
         */
        function linear(t, b, s, d) {
            return s / d * t + b;
        }
        function animate(ele, attr, target, duration=2000) {
            var t = 0;// 运动的时间
            var timeStep = 10; // 运动的时间间隔
            var begin = parseFloat(getComputedStyle(ele, null)[attr]); // 获取开始位置并转化成数字
            var s = target - begin;// 运动总路程
            ele.timer = setInterval(() => {
                // 1. 累加时间间隔
                t += timeStep;
                // 2. 判断停止条件
                if (t >= duration) {
                    // 1 。到达目标位置后，清除定时器
                    clearInterval(ele.timer);
                    // 2. 让位置就是目标位置
                    ele.style[attr] = target + 'px';
                    return;
                }
                // 3. 给元素属性赋值
                var nowLeft = linear(t, begin, s, duration);
                ele.style[attr] = nowLeft + 'px';
            }, timeStep);
        }

        var oBox = document.querySelector('#box');

        // animate(oBox, 'left', 500, 5000);
        animate(oBox, 'width', 300, 1000);

    </script>
</body>

</html>